<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl-nl" lang="nl-nl">
	<head>
		<title>Reisagenda</title>
		<link rel="stylesheet" href="template/bootstrap/bootstrap-responsive.css" type="text/css" />
		<link rel="stylesheet" href="template/bootstrap/bootstrap.css" type="text/css" />
		<link rel="stylesheet" href="template/style.css" type="text/css" />
		<script src="js/libs/jquery.js" type="text/javascript" ></script>
		<script src="js/libs/bootstrap.js" type="text/javascript" ></script>
		<script src="js/libs/csspopup.js" type="text/javascript" ></script>
	</head>
	<body>
		<div id="blanket" style="display:none;"></div>
		<div id="popUpDiv" style="display:none;">
			<h3>Registratie Formulier</h3>
			<form style="margin-left: 80px;">
				<input type="text" placeholder="naam" name="naam" style="width: 220px"/>
				<br />
				<input type="text" placeholder="achternaam" name="achternaam" style="width: 220px" />
				<br />
				<input type="email" placeholder="emailadres" name="emailadres" style="width: 220px" />
				<br />
				<input type="password" placeholder="wachtwoord" name="wachtwoord" style="width: 220px" />
				<br />
				<input type="password" placeholder="wachtwoord bevestigen" name="wachtwoord" style="width: 220px" />
			</form>
			<input class="btn-small" id="test2" type="submit" value="Bevestigen" onclick="popup('popUpDiv')" />
		</div>
		<div id="popUpDivWachtwoord" style="display:none;">
			<h3>Wachtwoord Vergeten</h3>
			<form id="test1">
				<input type="email" placeholder="emailadres" name="emailadres" style="width: 195px"/>
			</form>
			<input class="btn-small" type="submit" value="Verstuur" onclick="popup('popUpDivWachtwoord')" style="float: left;" />
			<p id="test">
				Na het verzenden ontvangt u een mail met een nieuw wachtwoord
			</p>
		</div>
		<div id="popUpDivReisPlan" style="display:none;">
			<h3>Reis Plan</h3>
			<form>
				<table id="reisplannetje">
					<tr>
						<td>
						<p class="reisplan ">
							Vanaf wanneer gaat u op reis?
						</p></td>
						<td>
						<input type="txt" class="test5" placeholder="dd/mm/jjjj" name="periode" style="width: 210px;" />
						</td>
					</tr>
					<tr>
						<td>
						<p class="reisplan">
							Tot wanneer gaat u op reis?
						</p></td>
						<td>
						<input type="txt" class="test5" placeholder="dd/mm/jjjj" name="periode" style="width: 210px;" />
						</td>
					</tr>
					<tr>
						<td>
						<p class="reisplan">
							Wat is u bestemming?
						</p></td>
						<td>
						<input type="txt" class="test5" placeholder="Plaatsnaam" name="bestemming" style="width: 210px;" />
						</td>
					</tr>
					<tr>
						<td>
						<p class="reisplan">
							Met hoeveel personen gaat u op reis?
						</p></td>
						<td>
						<select class="test5">
							<option value="0">Alleen</option>
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
							<option value="6">6</option>
							<option value="7">7</option>
							<option value="8">8+</option>
						</select></td>
					</tr>
					<tr>
						<td>
						<p class="reisplan">
							Met welke vervoer gaat u reizen?
						</p></td>
						<td>
						<select class="test5">
							<option value="vervoer">Nog geen idee</option>
							<option value="tevoet">Te voet</option>
							<option value="fiets">Fiets</option>
							<option value="auto">Auto</option>
							<option value="trein">Trein</option>
							<option value="metro">Metro</option>
						</select></td>
					</tr>
				</table>
				<input class="btn-small" id="test3" type="button" value="Bevestigen" onclick="window.location='agenda.html'" />
			</form>
		</div>
		<div id="maincontainer">
			<div id="header">
				<a href="index.html"><img src="images/logo.png" id="logo"></a>
				<div class="section login">
					<!--h3>Login</h3-->
					<form>
						<input type="text" name="user" placeholder ="Gebruikersnaam" style="width: 190px"/>
						<input type="password" name="pass" placeholder ="Wachtwoord" style="width: 190px" />
						<input class="btn-small" type="button" value="Inloggen" onclick="popup('popUpDivReisPlan')" />
					</form>
					<p id="test4" onclick="popup('popUpDivWachtwoord')">
						Wachtwoord vergeten
					</p>
				</div>
			</div>
			<div id="container">
				<div id="maincontent">
					<div id="myCarousel" class="carousel">
						<!-- Carousel items -->
						<div class="carousel-inner">
							<div class="active item">
								<img src="images/foto1.jpg" alt="foto1" />
								<div class ="carousel-caption">
									Geniet van de zon in Barcelona!
								</div>
							</div>
							<div class="item">
								<img src="images/foto2.jpg" alt="foto2" />
								<div class="carousel-caption">
									Een eigen prive strand in luilekkerland!
								</div>
							</div>
							<div class="item">
								<img src="images/foto3.jpg" alt="foto3" />
								<div class="carousel-caption">
									Geniet van de mooie Eifeltoren in Parijs!
								</div>
							</div>
						</div>
						<!-- Carousel nav -->
						<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
						<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
					</div>
				</div>
				<div id="sidecontent">
					<div class="rechterKolom">
						<p class="registreer" >
							Perfecte planning op reis
						</p>
						<p>
							Welkom bij Reisagenda, een website waarop jij je eigen reisagenda in kan vullen. Op deze manier kun je voor elke dag van je vakantie de leukste activiteiten opzoeken en aan je agenda toevoegen. De Reisagenda helpt je bij het maximale uit je reis halen door elke dag nieuwe suggesties te doen die aansluiten bij jou interesses.
						</p>
						<p>
							Volg simpelweg de volgende stappen en je kunt zorgeloos genieten op reis:
						</p>
						<!--ul id="registreerStappen"-->
						<p>
							<span class="badge badge-error">1</span>Registreer je bij Reisagenda.
						</p>
						<p>
							<span class="badge badge-error">2</span>Vul je persoonlijke reisplan in.
						</p>
						<p>
							<span class="badge badge-error">3</span>Bekijk de vele, speciaal voor jou geselecteerde activiteiten en voeg ze toe aan jouw persoonlijke agenda.
						</p>
						<!--/ul-->
						<input class="btn-large" id="startPaginaKnoppen" type="button" value="Registreer nu!" style="margin-top: 80px" onclick= "popup('popUpDiv')"/>
					</div>
				</div>
			</div>
		</div>
		<script>
			$('.carousel').carousel({
				interval : 2000
			})
		</script>
	</body>
</html>
